<!-- 我正在开发 我是刘瑶瑶 QQ：1778851996 昵称：喑 -->
<template>
	<view>
		<!-- 选择消毒位置 -->
		<view class="distinct">
			<view class="word">消毒位置</view>
			<!-- 地图 -->
			<view class="map">
				<!-- 地图 -->
				<!-- <map :latitude="location.latitude" :longitude="location.longitude" class="img"></map> -->
				<!-- 静态图片 -->
				<image src="/static/map.png" mode="scaleToFill" class="img"></image>
				<!-- 图标 -->
				<view class="icon iconfont icon-dizhi"></view>
				<!-- 选择按钮 -->
				<view class="select" @click="chooseLocation">点击选择位置</view>
			</view>
		</view>
		<!-- 显示选择的地址 -->
		<view class="detail-area">
			<view class="word">详细地址</view>
			<!-- 地址 -->
			<view class="detail">{{locationAddress}}</view>
		</view>
		<!-- 登记 -->
		<view class="sub-btn" @click="addDistinct">登记</view>
	</view>
</template>

<script>
	const myCloud = uniCloud.init({
		provider: 'aliyun',
		spaceId: '6cf77a04-ca59-47fd-94bc-512c560f6ca6',
		clientSecret: 'cY2Y7rfbJcRdtnYT3+cwpA=='
	});
	
	export default {
		data() {
			return {
				id: '',
				// 地址位置信息
				location: {
					latitude: 39.909,
					longitude: 116.39742
				},
				// 地址
				locationAddress: '未选择',
				time: ''
			}
		},
		onLoad(option) {
			if (option) {
				this.id = option._id
				this.location.latitude = option.latitude
				this.location.longitude = option.longitude
				this.locationAddress = option.locationAddress
			}
		},
		methods: {
			// 选择消毒位置
			chooseLocation: function () {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.location.latitude = res.latitude,
						this.location.longitude = res.longitude,
						this.locationAddress = res.address + ' ' + res.name
					}
				})
			},
			// 添加地址
			addDistinct() {
				if (this.locationAddress != '未选择') {
					if (this.id != '') {
						myCloud.callFunction({
							name: 'update_distinct',
							data: {
								"_id": this.id,
								"location": this.location,
								"locationAddress": this.locationAddress
							}
						}).then((res) => {
							console.log(res)
							if (res.result.updated == 1) {
								uni.showToast({
									title: '重置成功',
									icon: 'none'
								})
							}
						})
					} else {
						this.nowTime()
						myCloud.callFunction({
							name: 'add_distinct',
							data: {
								"location": this.location,
								"locationAddress": this.locationAddress,
								"time": this.time
							}
						}).then((res) => {
							console.log(res)
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
						})
					}
				} else {
					uni.showToast({
						title: '未选择位置',
						icon: 'none'
					})
				}
			},
			// 获取当前时间
			nowTime() {
				let time = new Date();
				let m = time.getMonth() + 1;
				let d = time.getDate();
				let hh = time.getHours();
				let mm = time.getMinutes();
				let ss = time.getSeconds();
				this.time =
					time.getFullYear() + '-' + (m > 9 ? m : '0' + m) + '-' + (d > 9 ? d : '0' + d) + ' ' + (hh > 9 ? hh : '0' + hh) + ':' + (mm > 9 ? mm : '0' + mm);
				console.log(this.time)
			}
		}
	}
</script>

<style scoped>
	/* 选择消毒位置与详细位置 */
	.distinct,
	.detail-area {
		display: flex;
		width: 750rpx;
		box-sizing: border-box;
		padding: 40rpx;
	}
	/* 左边文字 */
	.word {
		margin-right: 40rpx;
		font-size: 36rpx;
		color: #333;
	}
	/* 选择消毒位置补充 */
	.distinct {
		align-items: center;
		height: 280rpx;
	}
	/* 地图部分 */
	.map {
		position: relative;
		width: 476rpx;
		height: 200rpx;
		border: 4rpx solid rgba(239,239,239,1);
		border-radius: 24rpx;
	}
	/* 地图占位图片 */
	.img {
		width: 476rpx;
		height: 200rpx;
		border-radius: 24rpx;
	}
	/* 悬浮图标 */
	.icon {
		position: absolute;
		top: 65rpx;
		left: 90rpx;
		font-size: 70rpx;
		color: #6DDDCB;
		z-index: 9;
	}
	/* 选择位置按钮 */
	.select {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 66rpx;
		left: 156rpx;
		width: 230rpx;
		height: 70rpx;
		background-color: #000;
		opacity: 0.64;
		border-radius: 35rpx;
		font-size: 28rpx;
		color: #fff;
		z-index: 9;
	}
	/* 详细地址 */
	.detail {
		width: 484rpx;
		font-size: 32rpx;
		color: #333;
	}
	/* 提交按钮 */
	.sub-btn {
		margin: 50rpx 220rpx;
		width: 300rpx;
		height: 110rpx;
		border: 5rpx solid #fff;
		border-radius: 60rpx;
		box-shadow:0px 8px 12px rgba(0,0,0,0.16);
		background-color: #6DDDCB;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #fff;
	}
</style>
